<template>
  <!--空间图片用户上传行为分析-->
  <!--统计用户每月,每周,每日上传图片的数量趋势,帮助用户识别上传高峰期并优化管理策略,推荐使用 折线图 呈现时间序列趋势-->
  <div class="space-user-analyze">
    <a-card title="空间图片用户分析">
      <v-chart :option="options" style="height: 320px; max-width: 100%" :loading="loading" />
      <template #extra>
        <a-space>
          <a-segmented v-model:value="timeDimension" :options="timeDimensionOptions" />
          <a-input-search placeholder="请输入用户 id" enter-button="搜索用户" @search="doSearch" />
        </a-space>
      </template>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import VChart from 'vue-echarts'
import 'echarts'
import 'echarts-wordcloud'
import { message } from 'ant-design-vue'
import { getSpaceUserAnalyzeUsingPost } from '@/api/spaceAnalyzeController.ts'
import { computed, ref, watchEffect } from 'vue'

interface Props {
  queryAll?: boolean
  queryPublic?: boolean
  spaceId?: string
}

const props = withDefaults(defineProps<Props>(), {
  queryAll: false,
  queryPublic: false,
})

// 时间维度 选项
const timeDimension = ref<'day' | 'week' | 'month'>('day')
// 用户id 选项
const userId = ref<string>()
// 时间维度 选项
const timeDimensionOptions = [
  {
    label: '日',
    value: 'day',
  },
  {
    label: '周',
    value: 'week',
  },
  {
    label: '月',
    value: 'month',
  },
]
// 提交表单函数,单击搜索时修改用户id
const doSearch = (value: string) => {
  userId.value = value
}

// 图表数据
const dataList = ref<API.SpaceUserAnalyzeResponse[]>([])
const loading = ref(false)

/**
 * 加载数据
 */
const fetchData = async () => {
  // 这个条件判断会导致监听无法正常工作，导致多次快速调用API时出现问题。只在需要防止用户重复点击的时候才添加,否则不要添加
  // if (loading) return
  loading.value = true
  const res = await getSpaceUserAnalyzeUsingPost({
    queryAll: props.queryAll,
    queryPublic: props.queryPublic,
    spaceId: props.spaceId,
    timeDimension: timeDimension.value,
    userId: userId.value,
  })
  if (res.code === 0 && res.data) {
    dataList.value = res.data ?? []
  } else {
    message.error('获取数据失败，' + res.message)
  }
  loading.value = false
}
/**
 * 监听变量,改变时触发数据的重新加载
 * 为了让组件的属性变化时重新加载数据，需要使用watchEffect监听所有动态变量
 * watchEffect 会监听 fetchData() 当中所有的响应式变量，当其中的变量发生变化时，会重新执行 fetchData()
 */
watchEffect(() => {
  fetchData()
})
/**
 * 图表配置.
 * 注意:由于dataList是有一个加载过程的,所以需要使用computed计算属性来获取数据,始终根据dataList的值来计算
 */
const options = computed(() => {
  // 根据dataList生成periods数组，每个元素是item.period，即时间区间。
  const periods = dataList.value.map((item) => item.period) // 时间区间

  // 根据dataList生成counts数组，每个元素是item.count，即对应时间区间的上传数量。
  const counts = dataList.value.map((item) => item.count) // 上传数量

  return {
    // tooltip配置，用于在鼠标悬停时显示提示信息
    tooltip: {
      trigger: 'axis', // 触发类型为坐标轴触发，意味着当鼠标移到某一数据点上时会显示该系列的所有数据点的提示信息。
    },
    // xAxis配置，定义X轴
    xAxis: {
      type: 'category', // X轴类型为类别型，适用于离散的数据类型，如时间区间
      data: periods, // 数据来源，使用前面定义的periods数组作为X轴标签
      name: '时间区间', // X轴名称，帮助用户理解X轴代表的时间区间含义
    },
    // yAxis配置，定义Y轴
    yAxis: {
      type: 'value', // Y轴类型为数值型，适用于连续的数据类型，如上传数量
      name: '上传数量', // Y轴名称，明确指出该轴代表的是上传数量
    },
    series: [
      {
        name: '上传数量', // 系列名称，用于tooltip和legend中显示
        type: 'line', // 定义图表类型为折线图，适合用来展示随时间变化的趋势
        data: counts, // 数据源，使用前面定义的counts数组
        smooth: true, // 设置折线为平滑曲线，使得趋势更加流畅
        emphasis: {
          focus: 'series', // 当鼠标悬停在一个数据点上时，强调整个系列，而不是单个数据点
        },
      },
    ],
  }
})
</script>

<style scoped></style>
